<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>form editor demo</title>
<link type="text/css" href="jquery/css/base/jquery.ui.all.css" media="all" rel="stylesheet"/>
<script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="formEditor.css" type="text/css"  media="all" />
<script type="text/javascript" src="formEditor.js?as3"></script>
</head>
<body>

<div id="formEditor"></div>

<div>
    <button type="button" id="toJsonButton">To Json</button>
    <button type="button" id="fromJsonButton">From Json</button>
</div>
<div>
    <textarea id="jsonText"></textarea>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("div#formEditor").formEditor({'optionsLocation':'right'}); 
    $("#toJsonButton").button().click(function(){
        $("#jsonText").text($("div#formEditor").formEditor().toJson());
    });
    $("#fromJsonButton").button().click(function(){
        $("div#formEditor").formEditor().fromJson($("#jsonText").text());
    });
});
</script>



</body>
</html>

